<!-- http://www.imooc.com/wiki/uniapp/databinding.html -->
<template>
	<view class='content'>
		<!-- 标题 -->
		<view class="page-title">
			<view class="page-title__wrapper">
				<text class="page-title__text">{{title}}</text>
			</view>
		</view>
		
		<!-- 手机号 -->
		<view class="uni-form-item uni-column">
			<view class='phone_number_view'>
				<view class="phone_number_input">
					<input class="uni-input" placeholder="手机号"  type="number" @input="inputPhoneNumber" focus/>
				</view>
				<button class="send_code_button" @click='sendCodeButton'>发送验证码</button>
			</view>
		</view>
		
		<!-- 验证码 -->
		<view class="uni-form-item uni-column">
		    <view class="uni-input-wrapper">
				<input class="uni-input" maxlength="4" placeholder="验证码"  type="number" @input="inputPhoneCode" focus/>
			</view>
		</view>
		
		<!-- 姓名 -->
		<view class="uni-form-item uni-column">
			<view class="uni-input-wrapper">
				<input class="uni-input" maxlength="10" placeholder="姓名" @input="inputName" />
			</view>
		</view>
		
		<!-- 实时选择器: 专业 -->
		<view class="real_time_selector">
			<form @submit="formSubmit">
				<select-lay :zindex="3" :value="user_info.selected_major" name="name" placeholder="请选择您想填报的专业" :options="major_list"
					@selectitem="selectMajorItem">
				</select-lay>
			</form>
		</view>
		
		<!-- 实时选择器: 性别 -->
		<view class="real_time_selector">
			<form @submit="formSubmit">
				<select-lay :zindex="2" :value="user_info.sex" name="name" placeholder="请选择您性别" :options="sex_list"
					@selectitem="selectSexItem">
				</select-lay>
			</form>
		</view>
		
		
		<!-- 省市区选择器 -->
		<view class="uni-form-item uni-column">
			<view class="uni-input-wrapper">
				<input class="uni-input" maxlength="20"
				:placeholder="address?address:'点击选择地址'"
				 @click="addressShow = true" 
				 disabled="true"
				 />
			</view>
		    <!-- <view class="content_list_label" @click="addressShow = true">点击选择地址</view> -->
		    <view class="content_list_content uni-input-wrapper">
		        <!-- {{address}} -->
		        <pickerAddress v-model="addressShow" @confirm="addresspick" />
		    </view>
		</view>
		
		<!-- 详细地址 -->
		<view class="uni-form-item uni-column">
			<view class="uni-input-wrapper">
				<input class="uni-input" 
				maxlength="10" 
				placeholder="详细地址" 
				@input="inputAddressDetail"/>
			</view>
		</view>
		
		<!-- 当前所在学校 -->
		<view class="uni-form-item uni-column">
			<view class="uni-input-wrapper">
				<input class="uni-input" 
				maxlength="10" 
				placeholder="当前所在学校" 
				@input="inputCurrentSchool"/>
			</view>
		</view>
		
		<!-- 当前所在班级 -->
		<view class="uni-form-item uni-column">
			<view class="uni-input-wrapper">
				<input class="uni-input" maxlength="10" placeholder="当前所在班级" @input="inputCurrentClass" />
			</view>
		</view>
		
		<!-- 图片 -->
		<view class='img-box'>
			<img class="showlogo" 
			src="https://p.qpic.cn/qqconnect/0/app_101978535_1636395488/100?max-age=2592000&t=0?652.849053342532" 
			data-reactid=".4.1.1.0.0.0.1.0.4.1">
			<img class="showlogo" 
			src="https://p.qpic.cn/qqconnect/0/app_101978535_1636395488/100?max-age=2592000&t=0?652.849053342532" 
			data-reactid=".4.1.1.0.0.0.1.0.4.1">
			<img class="showlogo" 
			src="https://p.qpic.cn/qqconnect/0/app_101978535_1636395488/100?max-age=2592000&t=0?652.849053342532" 
			data-reactid=".4.1.1.0.0.0.1.0.4.1">
		</view>
		
		<button @click='myfunc'>查看已选专业</button>
	</view>
</template>

<script>
	import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
	export default {
		components: {
		    pickerAddress
		},
		data () {
			return {
				title: '报名申请表',
				phone_code: null,
				user_info: {
					phone_number: null,
					selected_major: '',
					sex: '',
					province: '',
					city: '',
					area: '',
					name: '',
					current_school: '',
					current_class: '',
					address_detail: '',
					
					address_selected: '',
					picture_id_card_positive: null,
					picture_id_card_negative: null,
					picture_sign: null,
				},
				//模拟数据列表
				major_list: [],
				//模拟初始数据
				tval: "value2",
				
				sex_list: [],
				sex_val: '',
				
				// 省市区
				addressShow: false,
                form: {
					// 默认内蒙古
                    province: "150000",
                    city: "150100",
                    area: "1501219f2a",
                },
                address: ''
			}
		},
		onLoad() {
			this.getMajors()
		},
		onReady() {
			this.major_list = [
				{
					label: "label11111",
					value: "value1"
				}
			];
			this.sex_list = [
				{
					label: "男",
					value: "男"
				},
				{
					label: "女",
					value: "女"
				},
			];
		},
		methods: {
			sendCodeButton() {
				console.log('sendCodeButton');
			},
			myfunc() {
				// console.log('=== tval:', this.tval);
				// console.log('=== sex_val: ', this.sex_val);
				// console.log('=== phone_code ===', this.phone_code);
				// console.log('-- form', this.form);
				console.log('=== user_info =========');
				console.log(this.user_info);
				
				console.log('---- 开始上传 -------');
				this.submit();
			},
			// 报名
			async submit () {
				// var myUrl = this.$baseUrl + '/api/index/ForecastRegistration/';
				var myUrl = '/api/index/ForecastRegistration/';
				console.log('~~~ myurl:', myUrl);
				const res = await this.$myRequest({
					method: 'POST',
					url: myUrl,
					data: this.user_info,
					// data: {
					// 	'name': 'bode1',
					// 	'phone_number': 'phone_number'
					// }
				})
				console.log('--- res.data: ', res.data);
				var result = res.data.result;
				var newUrl = myUrl + result.id.toString() + '/';
				
				console.log('--- newUrl: ', newUrl);
				// var new_data = this.add_hostname_before_keyname(res.data, 'image')
				// this.goods = new_data
				return newUrl;
			},
			inputPhoneNumber(e) {
				this.user_info.phone_number = e.detail.value;
			},
			inputPhoneCode(e) {
				this.phone_code = e.detail.value;
			},
			inputName(e) {
				this.user_info.name = e.detail.value;
			},
			inputSex(e) {
				this.user_info.sex = e.detail.value;
			},
			inputCurrentSchool(e) {
				this.user_info.current_school = e.detail.value;
			},
			inputCurrentClass(e) {
				this.user_info.current_class = e.detail.value;
			},
			inputAddressDetail(e) {
				this.user_info.address_detail = e.detail.value;
			},
			
			async getMajors() {
				const res = await this.$myRequest({
				  method: 'GET',
				  url: '/api/myconf/Major/'
				})
				var data = res.data.result.data
				
				this.major_list = []
				for(var i = 0; i < data.length; i++){
					 var dc = {
						label: data[i]['name'],
						value: data[i]['name'],
					}
					this.major_list.push(dc)
				}
			},
			
			selectMajorItem(index, item) {
				if (index >= 0) {
					this.user_info.selected_major = item.value;
				} else {
					this.user_info.selected_major = "";
				}
			},
			selectSexItem(index, item) {
				if (index >= 0) {
					this.user_info.sex = item.value;
				} else {
					this.user_info.sex = ""
				}
			},
			addresspick(obj) {
			    let arr = [ 'province', 'city', 'area'];
			    let place = '';
				
			    arr.map(key => {
			        this.form[key] = obj[key].AreaId
			        place += obj[key].AreaName + "/"
			    })
			    this.address = place;
				this.user_info.address_selected = place;
				this.user_info.province = obj['province'].AreaName
				this.user_info.city = obj['city'].AreaName
				this.user_info.area = obj['area'].AreaName
			},
		}
	}

</script>

<style lang="scss" scoped>
	// 标题
	.page-title{
		font-weight:bold;
		font-size: 64upx;
		text-align:center;
		margin-bottom: 40upx;
	}
	
	// 地址选择器样式
    .content {
        &_list{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content:space-around;
            &_lable{

            }
            &_content{
                flex: 1;
                width: auto;
                text-align: right;
            }
        }
    }
	
	// 输入框的一般格式
	.uni-form-item {
		border: 3upx solid #ccc;
		border-radius: 24upx;
		width: 90%;
		margin: auto;
		margin-top: 10upx;
		margin-bottom: 10upx;
	}
	.uni-input{
		min-height: 12upx;
	}
	
	// 手机验证码
	.phone_number_view {
		width: 100%;
		display: flex;
	}
	.phone_number_input {
		width: 53%;
		// position: relative;
	}
	.send_code_button {
		width: 40%;
		// position: relative;
	}
	
	// 实时选择器
	.real_time_selector{
		width: 90%;
		// height: 100%;
		margin: auto;
		margin-top: 10upx;
		margin-bottom: 10upx;
	}
	
	// 上传图片样式
	.img-box{
		display: flex;
		width: 60%;
		// margin: auto;
	}
	.showlogo {
	    width: 30%;
	    height: 30%;
	    position: relative;
	    border-radius: 20upx;
	    display: inline-block;
	    border: 1px dashed #c0c1c2;
		padding: 1%;
		margin-right: 10%;
		margin-left: 10%;
	}
</style>
